<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>EditArticle</title>
    <link rel="shortcut" th:href="@{/icon/java.svg}"/>
    <link rel="stylesheet" th:href="@{/plug/editor.md-master/css/editormd.css}">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"
            integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
            crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
            integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
            crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
            integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
            crossorigin="anonymous"></script>
    <script th:src="@{/plug/editor.md-master/editormd.min.js}"></script>
    <script th:src="@{/js/bootstrap-select.js}"></script>
    <link th:href="@{/css/bootstrap-select.css}" rel="stylesheet">
    <!--引入插件-->
    <script th:src="@{/plug/editor.md-master/plugins/image-handle-paste/image-handle-paste.js}"></script>

    <style type="text/css">
        html, body {
            margin: 0;
            height: 100%;
        }
    </style>

</head>
<body>
<div class="h-100 w-90">
    <nav class="navbar navbar-expand-sm navbar-light bg-light">
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <div class="input-group mb-3">
                <input type="text" class="form-control" id="articleTitle" placeholder="articleTitle"
                       aria-label="articleTitle"
                       aria-describedby="button-addon2">
                <div class="input-group-append">
                    <button class="btn btn-outline-secondary" type="button" id="button-addon2">发布文章</button>
                </div>
            </div>
        </div>
    </nav>
    <div id="layout" class="editor h-100" style="top:45px">
        <div id="test-editormd">
            <textarea></textarea>
        </div>
    </div>
</div>
<!-- Modal -->
<div class="modal fade" id="setTagForArticle" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalCenterTitle">文章设置</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <label class="input-group-text" for="inputGroupSelect01">类型</label>
                    </div>
                    <select class="custom-select " id="inputGroupSelect01">
                        <option value="0">原创</option>
                        <option value="1">转载</option>
                    </select>
                </div>
                <div class="input-group mb-3">
                    <div class="input-group-append">
                        <label class="input-group-text" for="inputGroupSelect02">Tags</label>
                    </div>
                    <select name="inputGroupSelect02" class="selectpicker show-tick form-control" multiple data-live-search="true" data-actions-box="true" id="inputGroupSelect02">
                    </select>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="SaveArticle">Save</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="messageInfo" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="messageInfoTitle">Tips</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" id="messageInfoMessage">

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<script th:inline="javascript">
    var article=[[${article}]];
    if(article){
        console.log(article);
    }

</script>
<script>
    var testEditor;
    if(article){
        $("#articleTitle").attr("value",article.title);
        testEditor = editormd("test-editormd", {
            markdown:article.content,
            width: "100%",
            height: "100%",
            syncScrolling: "single",
            path: "/plug/editor.md-master/lib/",   //你的path路径（原资源文件中lib包在我们项目中所放的位置）
            //theme: "dark",//工具栏主题
            // previewTheme: "dark",//预览主题
            // editorTheme: "pastel-on-dark",//编辑主题
            saveHTMLToTextarea: true,
            emoji: false,
            atLink: false,    // disable @link
            taskList: true,
            tocm: true,         // Using [TOCM]
            tex: true,                   // 开启科学公式TeX语言支持，默认关闭
            flowChart: true,             // 开启流程图支持，默认关闭
            sequenceDiagram: true,       // 开启时序/序列图支持，默认关闭,
            toolbarIcons: function () {  //自定义工具栏，后面有详细介绍
                return editormd.toolbarModes['full']; // full, simple, mini
            },
            imageUpload: true,
            imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            imageUploadURL: "/article/uploadImage",//注意你后端的上传图片服务地址
        });
    }else{
        testEditor = editormd("test-editormd", {
            width: "100%",
            height: "100%",
            syncScrolling: "single",
            path: "/plug/editor.md-master/lib/",   //你的path路径（原资源文件中lib包在我们项目中所放的位置）
            //theme: "dark",//工具栏主题
            // previewTheme: "dark",//预览主题
            // editorTheme: "pastel-on-dark",//编辑主题
            saveHTMLToTextarea: true,
            emoji: false,
            atLink: false,    // disable @link
            taskList: true,
            tocm: true,         // Using [TOCM]
            tex: true,                   // 开启科学公式TeX语言支持，默认关闭
            flowChart: true,             // 开启流程图支持，默认关闭
            sequenceDiagram: true,       // 开启时序/序列图支持，默认关闭,
            toolbarIcons: function () {  //自定义工具栏，后面有详细介绍
                return editormd.toolbarModes['full']; // full, simple, mini
            },
            imageUpload: true,
            imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            imageUploadURL: "/article/uploadImage",//注意你后端的上传图片服务地址
        });
    }
    testEditor.imagePaste();
    $(document).ready(function () {
        $('.selectpicker').selectpicker();
        $.get("/article/getAllTags",function (data,status) {
            if(data){
                var appendSelector='';
                for(var i in data){
                    var tag=data[i];
                    appendSelector=appendSelector+'<option value="'+tag.id+'">'+tag.value+'</option>';
                }
                console.log(appendSelector);
                $(".selectpicker").html(appendSelector);
                $('.selectpicker').selectpicker('refresh');//动态刷新
                // $("#inputGroupSelect02").append(appendSelector);
                // $("#setTagForArticle").modal('show');
            }
        });
        $("#button-addon2").click(function () {
            // console.log(testEditor.getMarkdown());
            if($("#articleTitle").val()&&$("#articleTitle").val()!=''){
                if(testEditor.getMarkdown()&&testEditor.getMarkdown()!=''){
                    if(article){
                        $.post("/article/updateArticle",{
                            articleContent:testEditor.getMarkdown(),
                            articleTitle:$("#articleTitle").val(),
                            articleID:article.id
                        },function (data,status) {
                            if(data&&data.status){
                                window.location.href = "/article/showArticle/" + article.id;
                            }
                        })
                    }else{
                        $("#setTagForArticle").modal('show');
                    }
                }else{
                    $("#messageInfoMessage").text("内容不能为空！");
                    $("#messageInfo").modal('show');
                }
            }else{
                $("#messageInfoMessage").text("标题不能为空！");
                $("#messageInfo").modal('show');
            }
        });
        $("#SaveArticle").click(function () {
            console.log($("#inputGroupSelect01").val(),$("#inputGroupSelect02").val());
            var tags=$("#inputGroupSelect02").val();
            var articleTags='';
            for(var t in tags){
                articleTags=articleTags+tags[t]+",";
            }
            $.post("/article/createArticle",
                {
                    articleTitle: $("#articleTitle").val(),
                    articleContent: testEditor.getMarkdown(),
                    articleShortcut: testEditor.getHTML(),
                    articleOriginal:$("#inputGroupSelect01").val(),
                    articleTags:articleTags
                },
                function (data, status) {
                    // console.log(data);Editor.md Ctrl+V粘贴上传图片
                    if (data.artilceId) {
                        window.location.href = "/article/showArticle/" + data.artilceId;
                    }
                });
        });
    });
</script>
</body>
</html>